<template>
	<view class="content over-y ff-m box-b bg-f5">
	<view class="my-address-item-box bg-white color-3 f-30 fw-bold" @click="goAddAdr">
			<block v-if="userAddress!=undefined">
				<view class="user-name-phone-box mb-20">
					<text>{{userAddress.real_name}}</text>
					<text class="phone">{{userAddress.phone}}</text>
					<text class="default fw-400 text-center br-15 ml-20">默认</text>
				</view>
				<view class="f-28 fw-400" style="color: #666;">{{myAddress}}</view>
			</block>
			<view class="f-32 fw-bold color-3 flex-c-c" v-else>+ 添加收货地址</view>
		</view>
	<view class="s-goods-plate-box">
		<view class="shop-goods-plate-box pd-tb-20" v-for="(item,index) in goodsInfo.list" :key="item.mer_id">
			<!-- 单个门店模块 -->
			<view class="shop-name-box flex-c">
				<image src="../../static/cart_icon/icon2.png" mode=""></image>
				<text>{{item.mer_name}}</text>
				<image src="/static/cart_icon/icon1.png" mode="heightFix"></image>
			</view>
			<view class="goods-plate-box">
				<!-- 商品列表 -->
				<view class="store-item-box pd-tb-20" v-for="(newItem,newIndex) in item.product" :key="newIndex">
					<view class="store-logo-box">
						<image :src="newItem.image" mode=""></image>
					</view>
					<view class="store-info-box">
						<view class="store-title-box f-30 fw-bold">
							<text class="ellipsis">{{newItem.store_name}}</text>
							<text>{{newItem.sku}}</text>
						</view>
						<view class="store-txt-box color-3">
							<view class="price-box f-22 fw-bold">
								￥<text>{{newItem.price}}</text>
							</view>
							<view class="add-goods-box flex-d f-30 fw-400" v-if="isShow">							
								<view class="reduce-box" @click="bindGoodsNum(2,newItem)">
									<image :src="newItem.cart_num==1?'../../static/cart_icon/icon8.png':'../../static/cart_icon/icon5.png'" mode=""></image>
								</view>
								<text class="value">{{newItem.cart_num}}</text>
								<view class="add-box" @click="bindGoodsNum(1,newItem)">
									<image :src="newItem.cart_num==newItem.stock?'../../static/cart_icon/icon7.png':'../../static/cart_icon/icon6.png'" mode=""></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="title-content-box pd-tb-20">
			<view class="title-box flex-b">
					<text>备注</text>
					<text>{{item.mask.length}}/45</text>
				</view>
				<view class="content-box">
					<textarea placeholder="请输入备注" maxlength="45" v-model="item.mask" placeholder-style="color:#CCC"></textarea>
				</view>
			</view>
		</view>
	</view>
	<view class="total-price-box mt-20">
		<view class="bottom-order-info-box f-30 fw-400 color-3">
			<view class="left-key-box">
				<text>商品价格</text>
				<text>运费</text>
			</view>
			<view class="right-value-box">
				<text>￥{{goodsInfo.product_fee}}</text>
				<text>￥{{goodsInfo.express_fee}}</text>
			</view>
		</view>
	</view>
	<view class="bottom-but-box flex-c-b bg-white">
		<view class="f-26 fw-bold color-3">
			待支付:￥<text style="font-size: 40rpx;">{{goodsInfo.total_fee}}</text>
		</view>
		<view class="buy-box" @click="goPuy">提交订单</view>
	</view>
</view>
</template>

<script>
	export default {
		data(){
			return {
				isShow:true,
				desc:'',//字数长度
				userAddress:null,
				goodsInfo:{},//商品信息
				data:{}
			}
		},
		onLoad(options) {
			uni.showLoading({title:"加载中"});
			this.data = JSON.parse(options.data);
			console.log(this.data,'----====');
			this.getCheckStoreOrder();
		},
		onShow() {
			this.getMyAddress();
		},
		computed:{
			myAddress(){
				if(this.$isDefine(this.userAddress)){
					let {province,city,district,detail} = this.userAddress;
					return `${province}${city}${district}${detail}`;
				}else{
					return;
				}
			}
		},
		methods:{
			getCheckStoreOrder(){
				this.$u.api.checkStoreOrderApi(this.data).then(res=>{
					if(res.code==1){
						console.log('商品信息：',res);
						res.data.list.forEach(item=>item.mask="");
						this.goodsInfo = res.data;
					}
				});
			},
			getMyAddress(){ //获取我的收货地址
				this.userAddress = null;
				this.$u.api.userAddressApi({}).then(res=>{
					if(res.code==1){
						this.userAddress = res.data.find(res=>res.is_default==1);
						console.log('我的收货地址：',this.userAddress);
					}
				});
			},
			bindGoodsNum(status,goodsItem){ //增减商品数量（操作）
				this.data.change = {};
				this.data.change.cart_id = goodsItem.cart_id;
				if(status==1){
					if(goodsItem.cart_num == goodsItem.stock){
						return
					}
					goodsItem.cart_num++;
					this.data.change.type = status;
					uni.showLoading({title:'计算中...',mask:true});
					this.getCheckStoreOrder();
				}else{
					if(goodsItem.cart_num==1){
						return
					}
					goodsItem.cart_num--;
					this.data.change.type = status;
					uni.showLoading({title:'计算中...',mask:true});
					this.getCheckStoreOrder();
				}
			},
			goPuy(){ //提交订单
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				if(this.$isDefine(this.userAddress)){
					console.log(this.data)
					let data = {
						address_id:this.userAddress.address_id,
						cart_id:this.goodsInfo.cart_id,
						mark:[]
					};
					this.goodsInfo.list.map(item=>{
						data.mark.push({
							mer_id:item.mer_id,
							mark:item.mask
						})
					});
					console.log(data)
					this.$u.api.createStoreOrderApi(data).then(res=>{
						if(res.code==1){
							console.log('数据：',res);
							if (this.goodsInfo.list.length != 1) {
								uni.showToast({
									title: '此订单包含多个门店，即将跳转至订单列表页进行支付',
									icon: 'none',
									mask: true
								})
								setTimeout(() => {
									uni.redirectTo({
										url: '/pageMember/orderList/orderList'
									})
								}, 1500)
								return
							}
							// 接入第三方支付
							const {
								timeStamp,
								nonceStr,
								signType,
								paySign,
							} = res.data
							uni.requestPayment({
								provider: 'wxpay',
								timeStamp,
								nonceStr,
								package: res.data.package,
								signType,
								paySign,
								orderInfo: res.data,
								success: res => {
									uni.showModal({
										title: '支付成功',
										showCancel: false,
										success: () => {
											uni.redirectTo({
												url: '/pageMember/orderList/orderList'
											})
										}
									})
								},
								fail: msg => {
									uni.showModal({
										title: '支付失败',
										showCancel: false,
										success: () => {
											uni.redirectTo({
												url: '/pageMember/orderList/orderList'
											})
										}
									})
								}
							})
						} else {
							uni.showToast({
								title: res.message || '提交订单失败',
								icon: 'none'
							})
						}
					});
					
				}else{
					this.$showToast('请添加收货地址');
					return;
				}
			},
			goAddAdr(){ //转到添加地址
				this.$gourl(`../../pageMember/tarbar/myAddress?status=${1}`);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		width: 100%;height: calc(100vh - 150rpx);
		.my-address-item-box{
			padding: 40rpx 20rpx;
			margin-bottom: 20rpx;
			.user-name-phone-box{
				margin-bottom: 20rpx;
				.phone{font-size: 28rpx;margin-left: 20rpx;}
				.default{
					display: inline-block;
					width: 80rpx;height: 30rpx;
					background: #FF5C5C;
					font-size: 22rpx !important;
					color: #FFFFFF !important;
				}
			}
		}
		.s-goods-plate-box{
			padding: 20rpx;background: #fff;
		.shop-goods-plate-box{
			border-bottom: 1rpx solid #F5F5F5;
			.shop-name-box{
				text{padding: 0 10rpx;}
				image{width: 30rpx;height: 30rpx;vertical-align: middle;}
				image:last-child{width: 20rpx; height: 20rpx;}
			}
			.store-item-box{
				display: flex;
				.store-logo-box{flex: 0.35;line-height: 0;image{width: 220rpx;height: 220rpx;border-radius: 10rpx;}}
				.store-info-box{
					flex: 0.65;
					display: flex;flex-direction: column;
					.store-title-box{
						flex: 0.7;
						color: #212121;
						display: flex; flex-direction: column;
						text{max-width: 400rpx;}
						text:last-child{font-size: 28rpx;font-weight: 400;color: #999999;margin-top: 10rpx;}
					}
					.store-txt-box{
						flex: 0.3;
						display: flex;
						.price-box{flex: 0.5;align-self: center;text{font-size: 30rpx;}}
						.add-goods-box{
							flex: 0.5;
							align-self: center;
							color: #393B42;
							line-height: 0;
							.value{width: 80rpx; height: 50rpx; line-height: 50rpx; font-size: 30rpx; text-align: center;}
							.reduce-box{image{width: 50rpx;height: 50rpx;}}
							.add-box{image{width: 50rpx;height: 50rpx;}}
						}
					}
				}
			}
			.title-content-box{
				.title-box{
					padding-bottom: 30rpx;
					text:first-child{font-size: 30rpx;font-weight: bold;color: #333333;}
					text:last-child{font-size: 26rpx;font-weight: 400;color: #999999;}
				}
				.content-box{
					width: 100%;
					textarea{width: 94%;height: 200rpx;padding: 20rpx;background: #F5F6FA;}
				}
			}
		}
	}
		.total-price-box{
			padding: 20rpx;
			padding-bottom: 100rpx;
			background: #fff;
			.bottom-order-info-box{
				display: flex;
				.left-key-box{flex: 0.5;display: flex;flex-direction: column;text{padding-bottom: 20rpx;}}
				.right-value-box{flex: 0.5;display: flex;flex-direction: column;text{padding-bottom: 20rpx; text-align: right;}}
			}
		}
		.bottom-but-box{
			width: 100%;
			padding: 20rpx 20rpx;
			padding-bottom: 50rpx;
			position: fixed;bottom: 0;z-index: 100;
			.buy-box{padding: 20rpx 50rpx;background: #000;color: #fff;border-radius: 50rpx;}
		}
	}
</style>